<template>
	<view class="box">
		<view class="cont">
			<view class="head">
				<text class="textOver" style="font-size: 35rpx;">评分</text>
				<view class="right">
					<uni-rate v-model="evalValue" />
					<!-- <text>进店逛逛</text>
					<image class="icon_next" src="../../static/images/mine/icon_next.png" mode=""></image> -->
				</view>
			</view>

		</view>
		<view class="cont">

			<view class="contBot" style="display: block;">

				<!-- 文本输入  :inputBorder="false" -->
				<uni-easyinput :inputBorder="false" type="textarea" @input="textIpt" focus v-model="textVal"
					placeholder="请输入内容"></uni-easyinput>

				<!-- 图片上传 -->
				<uni-file-picker v-model="image" fileMediatype="image" mode="grid" @select="select" @progress="progress"
					@success="success" @fail="fail" :limit="3" :del-icon="false">
					<view class="imgFile">
						<uni-icons type="camera" size="40"></uni-icons>
						<text>添加照片</text>
					</view>
				</uni-file-picker>


			</view>
		</view>
		<view class="btnBox">
			<button type="warn" class="btn" size="mini" @click="sub">提交评价</button>

		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				evalValue: 5, //评价星选中数
				imageValue: [], //图片上传值
				image: [],
				textVal: "", //文本输入值
				form: {},
				order: {},
			}
		},
		onLoad(e) {
			console.log('eee', e);
			this.form = {
				orderNum: e.orderNum,
				itemId: e.itemId,
				type: e.type,
				merchantId: e.merchantId
			}
		},
		methods: {
			textIpt() {

			},
			// 提交评价
			sub() {
				// 状态: -1：差评 0：中评 1：好评
				let status = 0
				if (this.evalValue <= 2) {
					status = -1
				} else if (this.evalValue >= 4) {
					status = 1
				} else {
					status = 0
				}
				this.form = {
					...this.form,
					content: this.textVal,
					status: status,
					img: JSON.stringify(this.imageValue),
					rate: this.evalValue
				}
				console.log('this.form', this.form);
				//请求
				this.$axios({
					url: `user/usEvaluate/add`,
					method: "post",
					data: this.form
				}).then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title: "提交成功",
							icon: 'none',
							duration: 2000
						})
					}
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						});
					}, 500)

				})


			},
			// ----------图片上传------------
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
				e.tempFilePaths.forEach(val => {
					pathToBase64(val)
						.then(base64 => {
							this.imageValue.push(base64)
						})
						.catch(error => {
							console.error(error)
						})
				})


			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			// 上传成功
			success(e) {
				console.log('上传成功')
			},
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			}
			// ----------图片上传------------
		}
	}
</script>

<style scoped>
	.btnBox {
		text-align: center;
	}

	.btn {
		border-radius: 100rpx;
		padding: 0 100rpx;
		background: linear-gradient(45deg, #ff6040, #ff7800);
	}

	/deep/.file-picker__box-content {
		width: 150rpx;
		height: 150rpx;
	}

	.imgFile {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999;
		font-size: 32rpx;
	}

	.box {
		padding: 30rpx;
	}

	.cont {
		background-color: #FFFFFE;
		border-radius: 25rpx;
		overflow: hidden;
		margin-bottom: 30rpx;

	}

	.cont .head {
		padding: 18rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cont .head .right {
		font-size: 30rpx;
		font-weight: normal;
	}

	.cont .head image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
	}

	.line {
		height: 3rpx;
		background-color: #eee;
	}

	.cont .contBot {
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		padding: 18rpx 24rpx;
	}
</style>
